<template>
  <div class="container">
    <div class="bigWord">{{this.bigWordTop}}</div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(item,index) in breadArr" :key="index">
            {{item.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
  </div>
</template>

<script>
// import Bus from './EventBus'
export default {
  watch:{
    $route:{
      handler:'routeChange',
      immediate:true //首屏执行一次
    }
  },
  data(){
      return{
        breadArr:[],
        bigWordTop:''
      }
  },
  mounted(){
    // console.log(this.$route);
  },
  methods:{
    routeChange(route){
       console.log(route);
       let breadArr1 = []
       route.matched.forEach((item,index)=>{
           if(index>=0){
             breadArr1.push({
               name:item.meta.title,
               path:item.path
             })
           }
           if(index===2){
              this.bigWordTop = breadArr1[2].name
           }
           
       })
      //  console.log(breadArr1[1]);
       this.breadArr = breadArr1  //报错    
    }
  }
}
</script>

<style lang="less" scoped>
.bigWord{
  font-size: 26px;
  color: black;
  padding-bottom: 24px;
.container{
    height: 108px;
    display: flex;
    justify-content: space-between;
    .left-top{
        font-size: 26px;
        padding-top: 20px;
        padding-bottom: 24px;
        color: black;
    }
    .bread-right{
        padding-top: 46px;
        display: flex;
        
        .iconfont{
            font-size: 14px;
        }
        div{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin-right: 14px;
            border-radius: 50%;
            background: #ebeeea;
        }

    }
    .el-breadcrumb{
        font-size: 14px;
    }

}
.el-breadcrumb{
  padding-bottom: 30px;
}
}
</style>